<template>
  <div class="test-sales">
    <div class="content-container">
      <div class="naviga"><span>新产品上市计划&nbsp;> </span><span class="setColor">活动数据上报</span></div>
      <div class="mainPage">
        <div class="titleHeader">部署计划明细</div>
        <div style="margin: 0px 12px;background: #fff;padding: 0 10px">
          <div class="channel-detail-select space-between"
               style="padding: 12px 0px;">
            <el-form :inline="true"
                     class="demo-form-inline single-form-inline  pickerOption"
                     size="mini">
              <el-form-item label="地区">
                <el-select class="selectFont"
                           v-model="region"
                           placeholder="选择地区"
                           @change="select">
                  <el-option class="selectFont"
                             v-for="(item,index) in regionList"
                             :label="item"
                             :value="item"
                             :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="省份">
                <el-select class="selectFont"
                           v-model="province"
                           placeholder="选择省份"
                           @change="select">
                  <el-option class="selectFont"
                             v-for="(item,index) in provinceList"
                             :label="item"
                             :value="item"
                             :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市">
                <el-select class="selectFont"
                           v-model="city"
                           placeholder="选择城市"
                           @change="select">
                  <el-option class="selectFont"
                             v-for="(item,index) in cityList"
                             :label="item"
                             :value="item"
                             :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态">
                <el-select class="selectFont"
                           v-model="status"
                           placeholder="选择状态"
                           @change="select">
                  <el-option class="selectFont"
                             label="全部"
                             value='全部'></el-option>
                  <el-option class="selectFont"
                             label="正在试销 "
                             value='0'></el-option>
                  <el-option class="selectFont"
                             label="已完成"
                             value='1'></el-option>
                </el-select>
              </el-form-item>
            </el-form>

          </div>
          <div class="tableContainer">
            <el-table :data="productStatus"
                      style="width: 100%"
                      size="mini">
              <el-table-column type="index"
                               width="80px"
                               label="编号">
              </el-table-column>
              <el-table-column label="地区&城市">
                <template slot-scope="scope">
                  <div>{{scope.row.region}}-{{scope.row.province}}-{{scope.row.city}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="trialSalePointName"
                               label="名称">
              </el-table-column>
              <el-table-column prop="planSales"
                               label="预计销量(件)">
              </el-table-column>
              <el-table-column prop="saleCountFinishRatioString"
                               label="销量完成度">
              </el-table-column>
              <el-table-column label="起止时间"
                               width="190">
                <template slot-scope="scope">
                  <div>{{scope.row.startTime}}-{{scope.row.endTime}}</div>
                </template>
              </el-table-column>
              <el-table-column label="状态"
                               width="124">
                <template slot-scope="scope">
                  <div class="status">{{scope.row.statu}}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作"
                               width="123">
                <template slot-scope="scope">
                  <div class="opreator">
                    <span @click="handleToDatailClick(scope.row)"
                          style="margin-right: 20px">详情</span>
                    <span v-if="scope.row.status == '0'"
                          @click="updateData(scope.row.trialSalePointId,scope.row.activityId)">数据上报</span>
                    <span v-else
                          @click="summary(scope.row.trialSalePointId)">总结</span>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--<div class="paginationSet">-->
          <!--<div class="pagination-container">-->
          <!--<div class="toStart" @click="setCurrentPage">-->
          <!--首页-->
          <!--</div>-->
          <!--<el-pagination-->
          <!--background-->
          <!--layout="prev, pager, next"-->
          <!--:current-page.sync="currentPage"-->
          <!--:total="1">-->
          <!--</el-pagination>-->
          <!--</div>-->
          <!--</div>-->
        </div>
      </div>
    </div>
    <el-dialog title="总结"
               id="pdfDom"
               class="centerFoot dialogHeaderFont"
               :visible.sync="dialogVisible1"
               width="440px">
      <div style="text-align: right">
        <el-button size="mini"
                   type="primary"
                   plain
                   @click="getPdf()">生成PDF</el-button>
      </div>
      <div class="contentBox">
        <el-form :inline="true"
                 class="demo-form-inline single-form-inline sum  pickerOption"
                 size="small">
          <el-form-item label="完成度:">
            <p>{{completeAna.finishRatioString}}</p>
          </el-form-item>
          <el-form-item label="完成度分析:">
            <el-input type="textarea"
                      :autosize="true"
                      v-model="completeAna.completionAnalysis"></el-input>
          </el-form-item>
          <el-form-item label="物料分析:">
            <el-input type="textarea"
                      :autosize="true"
                      v-model="completeAna.materielAnalysis"></el-input>
          </el-form-item>
          <el-form-item label="问题总结:">
            <el-input type="textarea"
                      :autosize="true"
                      v-model="completeAna.summary"></el-input>
          </el-form-item>
          <el-form-item label="建议:">
            <el-input type="textarea"
                      :autosize="true"
                      v-model="completeAna.suggestion"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"
            class="dialog-footer ">
        <el-button size="small"
                   @click="dialogVisible1 = false">取 消</el-button>
        <el-button size="small"
                   type="primary"
                   @click="dialogVisible1 = false;updateSummary()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="数据上报"
               class="centerFoot"
               :visible.sync="dialogVisible"
               width="540px">
      <div>
        <el-form :inline="true"
                 class="demo-form-inline single-form-inline locationDetail pickerOption"
                 size="small">
          <el-form-item label="反馈类型">
            <el-select v-model="feedbackType"
                       placeholder="选择类型"
                       style="width: 200px">
              <el-option label="问题反馈"
                         value="0"></el-option>
              <el-option label="销售数据与用户特征"
                         value="1"></el-option>
              <el-option label="现场信息"
                         value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="contentBox">
          <div class="feedback"
               v-if="feedbackType == 0">
            <el-form :inline="true"
                     :model="ruleForm"
                     :rules="rules"
                     ref="ruleForm1"
                     class="demo-form-inline single-form-inline  pickerOption formData"
                     size="small">
              <el-form-item label="反馈人群">
                <el-select class="selectFont"
                           v-model="ruleForm.personType"
                           placeholder="选择类型"
                           style="width: 200px">
                  <el-option class="selectFont"
                             label="经销商"
                             value="0"></el-option>
                  <el-option class="selectFont"
                             label="终端客户"
                             value="1"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="问题类型">
                <el-select class="selectFont"
                           v-model="ruleForm.issueType"
                           placeholder="选择类型"
                           style="width: 200px">
                  <el-option class="selectFont"
                             label="性能"
                             value="性能"></el-option>
                  <el-option class="selectFont"
                             label="包装"
                             value="包装"></el-option>
                  <el-option class="selectFont"
                             label="价格"
                             value="价格"></el-option>
                  <el-option class="selectFont"
                             label="可获得性"
                             value="可获得性"></el-option>
                  <el-option class="selectFont"
                             label="保证"
                             value="保证"></el-option>
                  <el-option class="selectFont"
                             label="易用性"
                             value="易用性"></el-option>
                  <el-option class="selectFont"
                             label="生命周期"
                             value="生命周期"></el-option>
                  <el-option class="selectFont"
                             label="社会接受度"
                             value="社会接受度"></el-option>
                  <el-option class="selectFont"
                             label="其他"
                             value="其他"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="问题内容">
                <el-input type="textarea"
                          :rows="5"
                          style="width: 260px"
                          placeholder="请输入内容"
                          v-model="ruleForm.textarea">
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="currentInfo"
               v-if="feedbackType == 1">
            <el-form :inline="true"
                     class="demo-form-inline single-form-inline  pickerOption formData"
                     size="small">
              <el-form-item label="时间段 ">
                <el-date-picker v-model="value6"
                                type="daterange"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                size="mini"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="流量"
                            class="smallInput marginInput">
                <el-input v-model="flowCount"></el-input>
              </el-form-item>
              <el-form-item label="销量"
                            class="smallInput marginInput">
                <el-input v-model="salesCount"></el-input>
              </el-form-item>
              <el-form-item label="已购人数"
                            class="smallInput">
                <el-input v-model="purchaseNumber"></el-input>
              </el-form-item>
              <el-form-item label="未购人数"
                            class="smallInput">
                <el-input v-model="noPurchaseNumber"></el-input>
              </el-form-item>
            </el-form>
            <div class="addSpec space-between"><span>用户特征:</span><span class="addBtn"
                    @click="addAge"> + 添加特征</span></div>
            <el-form :inline="true"
                     class="demo-form-inline single-form-inline  pickerOption formData"
                     size="small">
              <el-form-item label="年龄段 "
                            class="ageSelect"
                            v-for="(it,indx) in ageList"
                            :key="indx">
                <el-select class="selectFont"
                           v-model="it.ageAreaName">
                  <el-option class="selectFont"
                             v-for="(item,index) in it.stageItem"
                             :key="index"
                             :label="item.label"
                             :value="item.stage"></el-option>
                </el-select>
                <el-input v-model="it.ageNumber"
                          type="number"
                          :min="0"></el-input><span style="margin-left: 8px">人</span>
              </el-form-item>
            </el-form>
            <div>收入</div>
            <el-form :inline="true"
                     class="demo-form-inline single-form-inline  pickerOption formData income"
                     size="small">
              <el-form-item label="5万以下"
                            class="smallInput marginInput"
                            style="margin-top: 10px;">
                <el-input v-model="incomeNumber1"></el-input>
              </el-form-item>
              <el-form-item label="5-10万"
                            class="smallInput marginInput">
                <el-input v-model="incomeNumber2"></el-input>
              </el-form-item>
              <el-form-item label="10-20万"
                            class="smallInput marginInput">
                <el-input v-model="incomeNumber3"></el-input>
              </el-form-item>
              <el-form-item label="20-50万"
                            class="smallInput marginInput">
                <el-input v-model="incomeNumber4"></el-input>
              </el-form-item>
            </el-form>
            <div>性别</div>
            <el-form :inline="true"
                     class="demo-form-inline single-form-inline  pickerOption formData sex"
                     size="small">
              <el-form-item label="男"
                            class="smallInput marginInput"
                            style="margin-top: 10px;">
                <el-input v-model="sex1"></el-input>
              </el-form-item>
              <el-form-item label="女"
                            class="smallInput marginInput">
                <el-input v-model="sex2"></el-input>
              </el-form-item>
            </el-form>
            <div>教育程度</div>
            <el-form :inline="true"
                     class="demo-form-inline single-form-inline  pickerOption formData education"
                     size="small">
              <el-form-item label="小学"
                            class="smallInput marginInput"
                            style="margin-top: 10px;">
                <el-input v-model="education1"></el-input>
              </el-form-item>
              <el-form-item label="初中"
                            class="smallInput marginInput">
                <el-input v-model="education2"></el-input>
              </el-form-item>
              <el-form-item label="高中"
                            class="smallInput marginInput">
                <el-input v-model="education3"></el-input>
              </el-form-item>
              <el-form-item label="大学"
                            class="smallInput marginInput">
                <el-input v-model="education4"></el-input>
              </el-form-item>
              <el-form-item label="硕士"
                            class="smallInput marginInput">
                <el-input v-model="education5"></el-input>
              </el-form-item>
              <el-form-item label="博士"
                            class="smallInput marginInput">
                <el-input v-model="education6"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="dataUser"
               v-if="feedbackType == 2">
            <slider v-for="(item,index) in theme"
                    :key="index"
                    :theme="item"
                    :index="index"
                    :edit="edit"></slider>
            <div style="font-weight: bold"
                 class="addTheme"
                 @click="addTheme">
              + 添加主题
            </div>
          </div>

        </div>
      </div>
      <span slot="footer"
            class="dialog-footer ">
        <el-button size="small"
                   @click="dialogVisible = false">取 消</el-button>
        <el-button size="small"
                   type="primary"
                   @click="update()">确 定</el-button>
      </span>
    </el-dialog>
    <sale-detail :trialSalePoint.sync="trialSalePointParam"
                 :showdialog.sync="detailDialogVisible"></sale-detail>
  </div>
</template>

<script>
import slider from '../slider/slider'
import * as opreate from 'api/getData'
import SaleDetail from '../overAllDeploymentPlan/compentSet/SaleDetail'
let temSet = { stageItem: [{ stage: '0-6', label: '0-6岁' }, { stage: '7-17', label: '7-17岁' }, { stage: '18-40', label: '18-40岁' }, { stage: '41-65', label: '41-65岁' }, { stage: '65以上', label: '65以上' }], ageAreaName: '', ageNumber: '' }

export default {
  name: "test-sales",
  components: {
    slider,
    SaleDetail
  },
  data () {
    return {
      htmlTitle: '总结',
      edit: true,
      theme: [],
      items: { img: [], themeDescription: '', imageUrl: '', videoUrl: '' },
      productStatus: [],
      currentPage: 1,
      dialogVisible: false,
      dialogVisible1: false,
      feedbackType: '0',
      value6: '',
      flowCount: '',
      purchaseNumber: '',
      noPurchaseNumber: '',
      salesCount: '',
      flow: '',
      age: '',
      ageList: [],
      region: '全部',
      province: '全部',
      city: '全部',
      regionList: ['全部'],
      provinceList: ['全部'],
      cityList: ['全部'],
      status: '全部',
      ruleForm: {
        issueType: '性能',
        personType: '0',
        textarea: '',
      },
      rules: {},
      activityId: '',
      trialSalePointId: '',
      incomeNumber1: '',
      incomeNumber2: '',
      incomeNumber3: '',
      incomeNumber4: '',
      sex1: '',
      sex2: '',
      education1: '',
      education2: '',
      education3: '',
      education4: '',
      education5: '',
      education6: '',
      trialSalePointParam: {},
      detailDialogVisible: false,
      completeAna: {}
    }
  },
  mounted () {
    let x = JSON.parse(JSON.stringify(temSet))
    this.ageList.push(x)
    this.theme.push(JSON.parse(JSON.stringify(this.items)))
    this.area()
    this.getData()
  },
  methods: {
    handleToDatailClick (row) {
      this.trialSalePointParam = row
      this.detailDialogVisible = true
    },
    summary (id) {
      this.dialogVisible1 = true
      opreate.getSummary({ trialSalePointId: id }).then(res => {
        this.completeAna = res.data
        this.completeAna.trialSalePointId = id
      })
    },
    updateSummary () {
      opreate.editSummary(this.completeAna).then(res => {
      })
    },
    area () {
      let param = {
        region: this.region == '全部' ? undefined : this.region,
        province: this.province == '全部' ? undefined : this.province,
      }
      opreate.getSaleRegion().then(res => {
        this.regionList = ['全部', ...res.data]
      })
      opreate.getSaleProvince(param).then(res => {
        this.provinceList = ['全部', ...res.data]
      })
      opreate.getSaleCity(param).then(res => {
        this.cityList = ['全部', ...res.data]
      })
    },
    getData () {
      let param = {
        productId: this.$route.params.code,
        region: this.region == '全部' ? undefined : this.region,
        province: this.province == '全部' ? undefined : this.province,
        city: this.city == '全部' ? undefined : this.city,
        status: this.status == '全部' ? undefined : this.status
      }
      opreate.getSaleDetail(param).then(res => {
        this.productStatus = res.data
      })
    },
    select () {
      this.getData()
    },
    updateData (id, aid) {
      this.trialSalePointId = id
      this.activityId = aid
      this.dialogVisible = true
    },
    update () {
      let issue = {
        trialSalePointId: this.trialSalePointId,
        feedbackCrowd: this.ruleForm.personType,
        problemType: this.ruleForm.issueType,
        problemContent: this.ruleForm.textarea
      }
      let featrue = {
        trialSalePointId: this.trialSalePointId,
        activityId: this.activityId,
        salePointData: {
          startTime: this.value6[0],
          endTime: this.value6[1],
          flowCount: this.flowCount,
          purchaseNumber: this.purchaseNumber,
          noPurchaseNumber: this.noPurchaseNumber,
          salesCount: this.salesCount
        },
        listAgeArea: this.ageList,
        listGender: [{ genderName: '男', genderNumber: this.sex1 }, { genderName: '女', genderNumber: this.sex2 }],
        listIcome: [{ icomeAreaName: "5万以下", incomeNumber: this.incomeNumber1 }, { icomeAreaName: "5-10万", incomeNumber: this.incomeNumber2 }, { icomeAreaName: "10-20万", incomeNumber: this.incomeNumber3 }, { icomeAreaName: "20-50万", incomeNumber: this.incomeNumber4 }],
        listEducation: [{ educationName: '小学', deucationNumber: this.education1 }, { educationName: '初中', deucationNumber: this.education2 }, { educationName: '高中', deucationNumber: this.education3 }, { educationName: '大学', deucationNumber: this.education4 }, { educationName: '硕士', deucationNumber: this.education5 }, { educationName: '博士', deucationNumber: this.education6 }]
      }
      if (this.feedbackType == '0') {
        opreate.issueFeedBack(issue).then(res => {
          this.$message.success('数据上传成功');
          this.dialogVisible = false
          this.ruleForm.personType = '0'
          this.ruleForm.issueType = '性能'
          this.ruleForm.textarea = ''
        })
      } else if (this.feedbackType == '1') {
        opreate.userFeatrue(featrue).then(res => {
          this.$message.success('数据上传成功');
          this.dialogVisible = false
          this.flowCount = ''
          this.purchaseNumber = ''
          this.noPurchaseNumber = ''
          this.salesCount = ''
          this.incomeNumber1 = ''
          this.incomeNumber2 = ''
          this.incomeNumber3 = ''
          this.incomeNumber4 = ''
          this.sex1 = ''
          this.sex2 = ''
          this.education1 = ''
          this.education2 = ''
          this.education3 = ''
          this.education4 = ''
          this.education5 = ''
          this.education6 = ''
          this.value6 = ''
          this.ageList = []
          this.ageList.push(JSON.parse(JSON.stringify(temSet)))
        })
      } else {
        opreate.currentImg({ list: this.theme, trialSalePointId: this.trialSalePointId, activityId: this.activityId }).then(res => {
          if (res.data == 'success') {
            this.$message.success('数据上传成功');
            this.dialogVisible = false
            this.theme = []
            this.theme.push(JSON.parse(JSON.stringify(this.items)))
          }
        })
      }
    },
    addAge () {
      const y = JSON.parse(JSON.stringify(temSet))
      this.ageList.push(y)
    },
    addTheme () {
      this.theme.push(JSON.parse(JSON.stringify(this.items)))
    },
    setCurrentPage () {
      this.currentPage = 1
    }
  }
}
</script>

<style scoped>
.sum .el-form-item {
  width: 100%;
  margin-bottom: 10px;
}
.tableContainer {
  margin: 0 10px;
  border: 1px solid #e3e2e2;
}
.contentBox {
  background: #fff;
  margin-top: 15px;
  padding: 10px;
  box-sizing: border-box;
}
.formData .el-form-item + div {
  margin-top: 10px;
}
.el-date-editor {
  width: 80%;
}
.addSpec {
  margin: 15px 0;
  display: flex;
}
.addBtn,
.addTheme {
  height: 25px;
  line-height: 25px;
  border: 1px solid #3aaaec;
  color: #3aaaec;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  width: 80px;
  cursor: pointer;
}
.addTheme {
  margin: 0 auto;
  margin-top: 30px;
}
.titleHeader {
  font-weight: bold;
}
</style>
